<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>NavMenu.js</title>
  <link rel="stylesheet" href="https://www.layuicdn.com/layui-v2.4.5/css/layui.css">
  <link rel="stylesheet" href="style.css">
  <style>
    body {
      padding: 40px;
    }

    .layui-btn-container {
      margin: 0 auto;
      text-align: center;
    }

    .demo-block {
      display: block;
      max-width: 240px;
      /* margin: auto; */
      padding: 20px;
      background-color: #f7f8f9;
      box-sizing: content-box;
    }
  </style>
</head>
<body>
  <div class="layui-btn-container">
    <button type="button" class="layui-btn" data-action="flex">FLEX</button>
    <button type="button" class="layui-btn" data-reset="reset">RESET</button>
  </div>
  
  <main class="demo-block">
    <div id="menu" style="background-color: #2a7ee1; color: #fff;">
      <ul class="layui-menu">
        <li class="layui-menu-item has-menu">
          <div class="layui-menu-item-inner">
            <i class="layui-menu-item-icon"></i>
            <span class="layui-menu-item-label">1000</span>
            <i class="layui-menu-item-arrow"></i>
          </div>
          <ul class="layui-menu is-submenu">
            <li class="layui-menu-item">1100</li>
            <li class="layui-menu-item has-menu">
              <div class="layui-menu-item-inner">
                <i class="layui-menu-item-icon"></i>
                <span class="layui-menu-item-label">1200</span>
                <span class="layui-menu-badge">99+</span>
                <i class="layui-menu-item-arrow"></i>
              </div>
              <ul class="layui-menu is-submenu">
                <li class="layui-menu-item">
                  <div class="layui-menu-item-inner">
                    <i class="layui-menu-item-icon"></i>
                    <span class="layui-menu-item-label">1210</span>
                    <span class="layui-menu-badge">3</span>
                  </div>
                </li>
              </ul>
            </li>
          </ul>
        </li>
        <li class="layui-menu-item">
          <div class="layui-menu-item-inner">
            <i class="layui-menu-item-icon"></i>
            <span class="layui-menu-item-label">2000</span>
          </div>
        </li>
        <li class="layui-menu-item">
          <div class="layui-menu-item-inner">
            <i class="layui-menu-item-icon"></i>
            <span class="layui-menu-item-label">3000</span>
          </div>
        </li>
      </ul>
    </div>
  </main>
  <script src="https://www.layuicdn.com/layui-v2.4.5/layui.js"></script>
  <script>
    layui.config({
      base: './'
    }).extend({
      NavMenu: 'nav-menu'
    }).use(['jquery', 'NavMenu'], function($, NavMenu) {
      var getApi = function(callback) {
        $.get('data/data1.json', function(data) {
          data && $.type(callback) === 'function' && callback(data)
        })
      }

      var callback = function(data) {
        var nm = new NavMenu({
          keyLabel: 'name',
          keyPath: 'href',
          keySpread: false,
          selected: '1100'
        })

        const render = function() {
          nm.render('#menu', data, function(item) {
            return item.icon || item.iconFont || ''
          })
        }

        render()

        $('[data-action]').on('click', function(e) {
          var event = $(this).data('action')
          var action = {
            flex: function() {
              nm.flex('toggle')
            },
            reset: function() {
              render()
            }
          }
          $.type(action[event]) === 'function' && action[event].call()
        })
      }

      getApi(callback)
    })
  </script>
</body>
</html>